<template>
    <div>
        <el-form :model="form">
            <el-form-item label="商品名称">
                <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="子标题">
                <el-input v-model="form.subTitle" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
                <div class="item">
                    <el-cascader
                            v-model="categories"
                            :options="categoryData"
                            @change="select"
                            :props="props">
                    </el-cascader>
                </div>
            </el-form-item>
            <el-form-item label="商品品牌">
                <div class="item">
                    <el-select v-model="form.brandId">
                        <el-option v-for="brand in brands" :label="brand.name" :value="brand.id"></el-option>
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="上架下架">
                <div class="item">
                    <el-switch
                            v-model="form.saleable"
                            active-text="上架"
                            inactive-text="下架">
                    </el-switch>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    var _this = this;
    export default {
        name: "GoodsBasic",
        //自定义属性，声明从父页面传递的数据
        props: {
            form: {
                type: Object

            }
        },
        data(){
            return{
                categories:[],
                categoryData:[],
                brands:[],
                props:{
                        lazy:true,
                        lazyLoad(node,resolve){
                            //点击分类后加载子分类
                            _this.$http.get("http://api.blb.com/api/goods-api/category/parent/"+node.data.id)
                                .then(res => {
                                    if(res.data.code == 1){
                                        resolve(res.data.data);
                                    }
                                });
                        }
                }
            }
        },
        methods:{
            //根据父分类加载子分类
            loadCategories(pid){
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/"+pid)
                    .then(res => {
                        if(res.data.code == 1){
                            this.categoryData = res.data.data;
                            console.log(this.categoryData);
                        }
                    });
            },
            //选择商品分类
            select(categories){
                console.log(categories);
                this.categories = categories;
                if(this.categories.length > 2){
                    this.form.cid1 = this.categories[0];
                    this.form.cid2 = this.categories[1];
                    this.form.cid3 = this.categories[2];
                    //获得分类数组中最后的一级分类
                    let cid = this.categories[this.categories.length - 1];
                    //查询该分类下的所有商品品牌
                    this.$http.get("http://api.blb.com/api/goods-api/brand/category/"+cid)
                        .then(res => {
                            if(res.data.code == 1){
                                this.brands = res.data.data;
                            }
                        });
                    //通过分类id查询规格
                    this.$http.get("http://api.blb.com/api/goods-api/spec/category/"+cid)
                        .then(res => {
                           if(res.data.code == 1){
                               this.form.spuDetails.specifications = JSON.parse(res.data.data.specifications);
                               console.log(this.form.spuDetails.specifications);
                               const temp = [];
                               //{params} 是遍历数组对象时，只获取params属性
                               this.form.spuDetails.specifications.forEach(({params}) =>{
                                   //只获得k,options,global属性
                                   params.forEach(({k,options,global}) => {
                                       //将非全局的数据筛选出来 selected是选择的值
                                       if(!global){
                                           temp.push({k,options,selected:[]});
                                       }
                                   });
                               });
                               this.form.skuSpecs = temp;
                               console.log("skuspecs");
                               console.log(this.form.skuSpecs);
                           }
                        });
                }
            }
        },
        mounted() {
            this.loadCategories(0);
            _this = this;
        }
    }
</script>

<style scoped>
    .item{
        text-align:left;
        margin-top:40px
    }
</style>